<template>
  <transition name="slide-up">
    <view v-if="show" class="filter-popup">
      <view class="filter-content">
        <view class="arrow-double-down-icon" @click="close" />
        <view class="filter-header">
          <view class="filter-title">
            <view class="title-line-green" />
            <text class="title-text">
              {{ title }}
            </text>
          </view>
        </view>
        <view class="form-container">
          <view class="input-group">
            <input
              v-model="searchKeyword"
              class="input"
              :placeholder="inputPlaceholder"
            >
            <button class="search-btn" @click="searchItems">
              {{ buttonText }}
            </button>
          </view>
        </view>
        <scroll-view
          class="list-container"
          scroll-y
        >
          <view
            v-for="(item, index) in filteredList"
            :key="index"
            class="list-item"
            @click="selectItem(item)"
          >
            <view class="item-main">
              <text class="item-title">
                {{ item.name }}
              </text>
              <text class="item-subtitle">
                {{ item.phone }}
              </text>
            </view>
            <view class="item-arrow" />
          </view>
        </scroll-view>
      </view>
    </view>
  </transition>
</template>

<script setup lang="ts">
import { defineEmits, defineProps, ref } from 'vue';

const props = defineProps({
  show: Boolean,
  title: String,
  inputPlaceholder: String,
  buttonText: String,
  list: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(['update:show', 'select']);

const searchKeyword = ref('');
const filteredList = ref(props.list);

function close() {
  emit('update:show', false);
}

function searchItems() {
  if (!searchKeyword.value) {
    filteredList.value = props.list;
    return;
  }

  filteredList.value = props.list.filter(item =>
    item.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    || item.phone.includes(searchKeyword.value),
  );
}

function selectItem(item) {
  emit('select', item);
  close();
}
</script>

<style scoped>
.filter-popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80vh;
  background: #fff;
  z-index: 1000;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease-out;
}
.arrow-double-down-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto;
  margin-top: 10rpx;
  background: url("@/static/images/arrow-double-down.png") no-repeat center;
  background-size: contain;
}
.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}

.filter-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.handle-bar {
  width: 60rpx;
  height: 8rpx;
  background: #E5E5E5;
  border-radius: 4rpx;
  margin: 16rpx auto;
}

.filter-header {
  padding: 0 32rpx;
  margin-bottom: 24rpx;
}

.filter-title {
  display: flex;
  align-items: center;
}

.title-line-green {
  width: 6rpx;
  height: 32rpx;
  background-color: rgba(67, 207, 124, 1);
  margin-right: 16rpx;
  border-radius: 3rpx;
}

.title-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.form-container {
  padding: 0 32rpx;
  margin-bottom: 24rpx;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: rgba(242, 247, 255, 1);
  border-radius: 8rpx;
  height: 80rpx;
}

.input {
  flex: 1;
  height: 80rpx;
  font-size: 32rpx;
  padding: 0 24rpx;
}

.search-btn {
  border-radius: 0 8rpx 8rpx 0;
  background: rgba(67, 207, 124, 1);
  color: white;
  font-size: 32rpx;
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-weight: bold;
}

.list-container {
  flex: 1;
  padding: 0 32rpx;
  overflow-y: auto;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #F5F5F5;
}

.item-main {
  flex: 1;
  padding: 10rpx 20rpx;
  text-align: center;

}

.item-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.item-subtitle {
  font-size: 28rpx;
  color: #999;
}

.item-arrow {
  width: 16rpx;
  height: 16rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
  margin-left: 16rpx;
}
</style>
